<template>
  <div class="order-detail-box">
    <el-card class="table-card">
      <template #header>
        <el-button @click="addLists()" v-if="userStore.userInfo.id == '6'" size="large" icon="Plus">添加充值</el-button>
      </template>
    </el-card>
    <el-table :data="lists" border style="width: 100%">
      <el-table-column prop="id" label="编号" align="center" width="80px" header-align="center"></el-table-column>

      <el-table-column prop="caozuorenname" label="操作人" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="createtime" label="时间" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="price" label="金额" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="context" label="备注" align="center" header-align="center"> </el-table-column>

      <el-table-column label="操作" align="center" header-align="center" width="160px">
        <template #default="scope">
          <el-icon @click.stop="deleteFun(scope.row.id)" class="lists-delete-icon">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: right; margin-top: 20px; overflow: hidden">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        @prev-click="handlePrev" @next-click="handleNext" :current-page="pageNo" :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
      </el-pagination>
    </div>
  </div>

  <el-dialog v-model="showChongZhi" title="取件物流信息">
    <el-form ref="chongzhiFormRef" :model="form" :rules="rules" label-width="126px">
      <el-form-item label="金额:" prop="price">
        <el-input v-model="form.price" clearable />
      </el-form-item>
      <el-form-item label="备注:" prop="context">
        <el-input v-model="form.context" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showChongZhi = false">取消</el-button>
        <el-button type="primary" @click="confirmFun">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { createCangkuChongzhi, getCangkuChongzhi, deleteCangkuChongzhi } from '@api/cangku'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/pinia/user'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const lists = ref([])
const cangkuid = ref('')
const form = ref({
  price: 1,
  context: ''
})
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(10)

const rules = reactive({
  price: [
    {
      required: true,
      validator: (rule, value, callback) => {
        value = form.value.price
        if (!value) {
          callback(new Error('金额不能为空!'))
        } else if (!/^[+]?(0|([1-9]\d*))(\.\d+)?$/g.test(value)) {
          callback(new Error('请输入数字!'))
        } else if (value <= 0) {
          callback(new Error('金额必须大于0!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})
const getList = async () => {
  let res = await getCangkuChongzhi({ cangkuid: cangkuid.value, pageNo: pageNo.value, pageSize: pageSize.value })
  if (res.code) {
    lists.value = res.data
    total.value = parseInt(res.msg)
  }
}

//pageSize改变
function handleSizeChange(val) {
  pageSize.value = val
  getLists()
}

//pageNo改变
function handleCurrentChange(val) {
  pageNo.value = val
  getLists()
  // this.$store.dispatch('setpageNo', val);
}

//上一页
function handlePrev(val) {
  pageNo.value = val
  getLists()
}

//下一页
function handleNext(val) {
  pageNo.value = val
  getLists()
}

//添加文章
const showChongZhi = ref(false)
function addLists() {
  form.value.price = 0
  form.value.context = ''
  showChongZhi.value = true
}

// 添加或编辑
const chongzhiFormRef = ref()
function confirmFun() {
  chongzhiFormRef.value.validate(async (valid) => {
    if (valid) {
      let res = ''
      let { price, context } = form.value

      let data = {
        price,
        context,
        cangkuid: cangkuid.value
      }

      res = await createCangkuChongzhi(data)

      if (res.code == 200) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })

        showChongZhi.value = false

        getList()
      }
    }
  })
}

//删除充值
function deleteFun(id, index) {
  ElMessageBox.confirm('确定删除充值记录?')
    .then(async () => {
      let res = await deleteCangkuChongzhi({ id })
      if (res.code == 200) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })
        getList()
      }
    })
    .catch(() => { })
}

onMounted(() => {
  cangkuid.value = route.query.cangkuid
  getList()
})
</script>
<style lang="scss"></style>
